<template>
  <div class="song-drawer-box">
    <slot name="top" class="hello"></slot>
    <!-- 主体 -->
    <div class="song-drawer-body">
      <div class="song-info">
        <div class="song-drawer-left-cover">
          <div class="left-center-box">
            <img class="left-cover" :src="drawerSongInfo.songs[0].al.picUrl" alt="" srcset="">
          </div>
        </div>
        <div class="song-drawer-right">
          <div class="song-name"><p class="song-name-p">{{drawerSongInfo.songs[0].al.name}}</p></div>
          <!-- 歌手信息 -->
          <div class="song-author-info">
            <span>歌手:</span><span class="mar-rig">{{ drawerSongInfo.songs[0].ar[0].name }}</span>
            <span>专辑:</span><span class="mar-rig">{{drawerSongInfo.songs[0].tns==undefined?'无':drawerSongInfo.songs[0].tns[0]}}</span>
          </div>
          <!-- 歌词滚动 -->
          <div class="song-words-box">
            <p v-for="(item,index) in drawerSongWord" :key="index">{{ item.lrc }}</p>
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <div class="song-pinglun">
        <div class="song-pinglun-left">
          <h4>全部评论<span>({{ comenObj.totalCount }}条)</span></h4>
          <ul class="song-pinglun-list">
            <li class="song-pinglun-item" v-for="(item,index) in comenObj.comments" :key="index">
              <img class="song-pinglun-avater" :src="item.user.avatarUrl" alt="" srcset="">
              <div class="song-item-right">
                <p class="right-top"><span class="coment-nick-name">{{item.user.nickname}}:</span><span class="coment-content">{{item.content}}</span></p>
                <p class="right-bot"><span class="coment-str">{{item.timeStr}}</span><span class="coment-time">{{item.time | formatPlayTime}}</span></p>
              </div>
            </li>
          </ul>
          <!-- 分页器具 -->
          <el-pagination
            layout="prev, pager, next"
            @current-change="currentPageHandler"
            :page-size="pageSize"
            :total="comenObj.totalCount">
          </el-pagination>
        </div>
        <div class="song-pinglun-right">
          <h5>他(她)的热门专曲</h5>
          <ul class="author-list">
            <li class="author-item" v-for="(item,index) in authorMusicList" :key="index">
              <img class="author-item-cover" :src="item.al.picUrl" alt="" srcset="">
              <p class="author-item-fot"><span>{{item.name}}---</span><span>{{item.alia[0]}}-{{item.ar[0].name}}</span></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getMusicTallk,getSongsAuthorMusic} from '@/request/Api.js'
export default {
  name:'SongDrawer',
  created(){
    this.$bus.$on('getComment',(params)=>{
        this.songsId = params
        this.getMusicComment(params,0,this.pageNo,this.pageSize,this.sortType)
        this.getSongAuthor(this.drawerSongInfo.songs[0].ar[0].id)
    })
    console.log('当前歌曲的乐手id',this.drawerSongInfo.songs[0].ar[0].id);
  },
  data(){
    return {
      pageNo:1,
      pageSize:20,
      // 排序方式
      sortType:2,
      // 评论有关对象
      comenObj:{},
      songsId:'',
      // songAuthorId:'',
      authorMusicList:[]
    }
  },
  props:{
    drawerSongInfo:{
      default:()=>{},
      type:Object
    },
    drawerSongWord:{
      default:()=>[],
      type:Array
    }
  },
  methods:{
    // 获取当前品论
    // 获取评论数据
    async getMusicComment(id,type,pageNo,pageSize,sortType){
      let a = this.$loading({target:document.querySelector('.song-pinglun-list'),text:'获取评论中···'})
      const {data:res} = await getMusicTallk(id,type,pageNo,pageSize,sortType)
      a.close()
      if(res.code!==200){
        return
      }
      this.comenObj = res.data
    },
    // 获取歌手的热门歌曲50曲
    async getSongAuthor(songAuthorId){
      let a = this.$loading({target:document.querySelector('.author-list'),text:'加载中'})
      const {data:res} = await getSongsAuthorMusic(songAuthorId)
      a.close()
      if(res.code !==200){
        return
      }
      console.log('歌手的热门歌曲',res);
      this.authorMusicList = res.songs.slice(0,25)
    },
    // 页数改变处理函数
    currentPageHandler(cur){
      console.log('当前点击的数据',cur);
      this.pageNo = cur
      this.getMusicComment(this.songsId,0,this.pageNo,this.pageSize,this.sortType)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .tabbars {
  position: fixed;
  top: 0px;
  box-shadow: none;
  z-index: 8;
}
.song-drawer-body {
  position: relative;
  top: 50px;
  width: 90%;
  margin: 0 auto;
  .song-info {
    width: 100%;
    height: 20rem;
    padding: .4rem;
    overflow: hidden;
    // background: rgb(116, 112, 112);
    .song-drawer-left-cover {
      width: 50%;
      float: left;
      height: 100%;
      .left-center-box {
        overflow: hidden;
        width: 15rem;
        height: 15rem;
        margin: 2rem auto;
        .left-cover {
          border-radius: 2%;
          width: 100%;
          object-fit: contain;
        }
      }
    }
    .song-drawer-right {
      width: 50%;
      float: left;
      padding: .4rem;
      .song-author-info {
        margin-top: .4rem;
        margin-bottom: .4rem;
        font-size: .4rem;
        color: rgb(167, 166, 166);
        .mar-rig {
          margin-right: .6rem;
        }
      }
    }
    // 歌词滚动
    .song-words-box {
      color: rgb(148, 139, 139);
      font-size: .7rem;
      width: 60%;
      height: 15rem;
      overflow-y: scroll;
      p {
        padding: .4rem 0px;
      }
    }
  }
}
.song-pinglun {
  width: 100%;
  .song-pinglun-left {
    // padding: 0px 15%;
    width: 70%;
    float: left;
    .song-pinglun-list {
      width: 100%;
      .song-pinglun-item {
        padding: .8rem 0px;
        width: 60%;
        display: flex;
        border-bottom: 1px #ebebeb solid;
        .song-pinglun-avater {
          width: 2rem;
          height: 2rem;
          border-radius:50%;
        }
        .song-item-right {
          font-size: .8rem;
          margin-left: .8rem;
          display: flex;
          flex-direction: column;
          color: rgb(153, 153, 153);
          .right-top {
            .coment-nick-name {
              color: rgb(115, 148, 188);
              cursor: pointer;
              &:hover {
                list-style: decimal;
              }
            }
            .coment-content {
              color: rgb(0, 0, 0);
            }
          }
          .right-bot {
            margin-top: .6rem;
            font-size: .7rem;
          }
        }
      }
    }
  }
  .song-pinglun-right {
    width: 30%;
    float: left;
    .author-list {
      width: 100%;
      .author-item {
        margin-top: .8rem;
        background: rgba(219, 216, 216, 0.16);
        padding: .6rem .3rem;
        border-radius: .6rem;
        display: flex;
        width: 100%;
        .author-item-cover {
          width: 2rem;
          height: 2rem;
          border-radius: .4rem;
        }
        .author-item-fot {
          margin-left: .8rem;
          font-size: .6rem;
          color: #3c3c3c;
        }
        &:hover {
          background: rgba(219, 216, 216, 0.32);
        }
      }
    }
  }
}


::v-deep.el-pagination {
  text-align: center;
  padding: 1rem 5px;
  .active {
    color: red;
  }
}

</style>